<template>
  <div class="chart-item medium">
    <div class="chart-header">
      <h3>物料周转效率分析</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="analysisType" size="small" @change="handleAnalysisTypeChange">
          <el-radio-button label="efficiency">周转效率</el-radio-button>
          <el-radio-button label="frequency">周转频次</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div class="turnover-metrics">
        <div class="metric-card">
          <div class="metric-value">{{ turnoverData.avgDays }}</div>
          <div class="metric-label">平均在库天数</div>
          <div class="metric-trend" :class="turnoverData.avgDaysChange >= 0 ? 'negative' : 'positive'">
            {{ turnoverData.avgDaysChange >= 0 ? '+' : '' }}{{ turnoverData.avgDaysChange }}天
          </div>
        </div>
        <div class="metric-card">
          <div class="metric-value">{{ turnoverData.turnoverTimes }}</div>
          <div class="metric-label">年周转次数</div>
          <div class="metric-trend" :class="turnoverData.turnoverTimesChange >= 0 ? 'positive' : 'negative'">
            {{ turnoverData.turnoverTimesChange >= 0 ? '+' : '' }}{{ turnoverData.turnoverTimesChange }}次
          </div>
        </div>
      </div>
      <div ref="turnoverChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MaterialTurnoverChart',
  props: {
    turnoverData: {
      type: Object,
      default: () => ({
        avgDays: 15.6,
        avgDaysChange: -2.3,
        turnoverTimes: 23.4,
        turnoverTimesChange: 1.8
      })
    }
  },
  data() {
    return {
      analysisType: 'efficiency',
      chart: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.initChart()
    }, 100)
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  watch: {
    turnoverData: {
      handler() {
        this.updateChart()
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.turnoverChart
        if (!chartDom) {
          console.warn('TurnoverChart DOM element not found')
          return
        }

        this.chart = echarts.init(chartDom)
        this.updateChart()

        window.addEventListener('resize', () => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      })
    },

    updateChart() {
      if (!this.chart) return

      let option = {}

      if (this.analysisType === 'efficiency') {
        // 仪表盘显示周转效率
        option = {
          series: [
            {
              name: '周转效率',
              type: 'gauge',
              center: ['50%', '60%'],
              radius: '80%',
              min: 0,
              max: 50,
              splitNumber: 5,
              axisLine: {
                lineStyle: {
                  width: 8,
                  color: [
                    [0.2, '#ff6e76'],
                    [0.4, '#fddd60'],
                    [0.6, '#58d9f9'],
                    [0.8, '#7cffb2'],
                    [1, '#58d9f9']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -8,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -12,
                length: 12,
                lineStyle: {
                  color: '#fff',
                  width: 3
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 20,
                fontSize: 10
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}次/年',
                color: 'auto',
                fontSize: 14,
                offsetCenter: [0, '70%']
              },
              data: [
                {
                  value: this.turnoverData.turnoverTimes,
                  name: '年周转次数'
                }
              ]
            }
          ]
        }
      } else {
        // 柱状图显示各库房周转频次
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['华东库房', '华南库房', '华北库房', '西南库房', '其他库房'],
            axisLabel: {
              fontSize: 10,
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            name: '周转次数',
            nameTextStyle: {
              fontSize: 10
            },
            axisLabel: {
              fontSize: 10
            }
          },
          series: [
            {
              name: '周转次数',
              type: 'bar',
              data: [
                { value: 28.5, itemStyle: { color: '#5470c6' } },
                { value: 24.2, itemStyle: { color: '#91cc75' } },
                { value: 31.8, itemStyle: { color: '#fac858' } },
                { value: 19.6, itemStyle: { color: '#ee6666' } },
                { value: 15.3, itemStyle: { color: '#73c0de' } }
              ],
              barWidth: '60%',
              label: {
                show: true,
                position: 'top',
                fontSize: 10
              }
            }
          ]
        }
      }

      this.chart.setOption(option, true)
    },

    handleAnalysisTypeChange(type) {
      this.analysisType = type
      this.updateChart()
      this.$emit('analysis-type-change', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.turnover-metrics {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;

  .metric-card {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;

    .metric-value {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 4px;
    }

    .metric-label {
      font-size: 11px;
      color: #909399;
      margin-bottom: 4px;
    }

    .metric-trend {
      font-size: 10px;

      &.positive {
        color: #67c23a;
      }

      &.negative {
        color: #f56c6c;
      }
    }
  }
}

.chart-content {
  .chart {
    width: 100%;
    height: 220px;
  }
}

.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
